<script setup>
import { ref, provide } from 'vue'
import Slider from '@/Pages/Slider.vue'
import Home from '@/Pages/Home.vue'
import Store from '@/Pages/Store.vue'
import Upload from '@/Pages/Upload.vue'

// 当前选中的页面索引
const currentPageIndex = ref(0) // 默认显示Home页面

// 提供给子组件使用
provide('currentPageIndex', currentPageIndex)

// 页面切换函数
const setCurrentPage = (index) => {
  currentPageIndex.value = index
}

// 提供页面切换函数给子组件
provide('setCurrentPage', setCurrentPage)
</script>

<template>
  <div class="app-container">
    <Slider />
    <!-- 根据currentPageIndex显示不同的页面 -->
    <Home v-if="currentPageIndex === 0" />
    <Store v-else-if="currentPageIndex === 1" />
    <Upload v-else-if="currentPageIndex === 2" />
  </div>
</template>

<style scoped>
/* 全局样式重置 - 完全隐藏所有滚动条 */
:deep(html), :deep(body) {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 隐藏横向和纵向滚动条 */
  overflow-x: hidden; /* 强制隐藏横向滚动条 */
  overflow-y: hidden; /* 强制隐藏纵向滚动条 */
  /* 隐藏滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE和Edge */
}

/* 隐藏所有Webkit浏览器的滚动条 - 更全面的选择器 */
:deep(html)::-webkit-scrollbar,
:deep(body)::-webkit-scrollbar,
:deep(*)::-webkit-scrollbar,
:deep(div)::-webkit-scrollbar,
:deep(section)::-webkit-scrollbar,
:deep(article)::-webkit-scrollbar,
:deep(main)::-webkit-scrollbar,
:deep(aside)::-webkit-scrollbar,
:deep(nav)::-webkit-scrollbar,
:deep(header)::-webkit-scrollbar,
:deep(footer)::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* 隐藏滚动条的轨道和滑块 */
:deep(*)::-webkit-scrollbar-track,
:deep(*)::-webkit-scrollbar-thumb,
:deep(*)::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

/* 全局所有元素隐藏滚动条 - 更强制性的规则 */
:deep(*) {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE和Edge */
}

/* 针对可能出现滚动条的容器元素 */
:deep(div), :deep(section), :deep(article), :deep(main), 
:deep(aside), :deep(nav), :deep(header), :deep(footer),
:deep(ul), :deep(ol), :deep(li), :deep(p), :deep(span) {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE和Edge */
}

/* App根容器铺满全屏 */
.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden !important; /* 隐藏横向和纵向滚动条 */
  overflow-x: hidden !important; /* 强制隐藏横向滚动条 */
  overflow-y: hidden !important; /* 强制隐藏纵向滚动条 */
  /* 隐藏滚动条样式 */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE和Edge */
  box-sizing: border-box;
  
  /* 现代化渐变背景 */
  background: linear-gradient(
    135deg,
    #e8eaf6 0%,
    #f3e5f5 25%,
    #fce4ec 50%,
    #e1f5fe 75%,
    #f1f8e9 100%
  );
  
  /* 添加动态背景动画 */
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  
}

/* 添加微妙的纹理层 */
.app-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(159, 168, 218, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(186, 104, 200, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(129, 199, 132, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 确保内容在背景之上 */
.app-container > * {
  z-index: 1;
}

/* 背景渐变动画 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/* 确保app-container及其所有子元素完全隐藏滚动条 */
.app-container::-webkit-scrollbar,
.app-container *::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.app-container::-webkit-scrollbar-track,
.app-container::-webkit-scrollbar-thumb,
.app-container::-webkit-scrollbar-corner,
.app-container *::-webkit-scrollbar-track,
.app-container *::-webkit-scrollbar-thumb,
.app-container *::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}
</style>